import React, { useState, useEffect } from 'react';
import { Skeleton } from 'antd';
import { Pie, measureTextWidth } from '@ant-design/plots';
import { axiosAjax } from '../../services/analysisAxios';

export default function Total() {
    // 今日不同类型的商品所有数量
    const [dataTotal, setDataTotal] = useState([]);
    function renderStatistic(containerWidth, text, style) {
        const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
        const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2
        let scale = 1;
        if (containerWidth < textWidth) {
            scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
        }
        const textStyleStr = `width:${containerWidth}px;`;
        return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
    }
    // 获取今日不同类型的商品所有数量
    const allCommityTotal = async () => {
        let data = await axiosAjax('get', '/analysis/allshops');
        let arr = [];
        // 把不同类型商品的数据存到dataTotal
        if (data.data.length > 0) {
            // 过滤不同类型下商品数为0的类型
            arr = data.data.filter(item => {
                if (item['value'] != 0) {
                    return item;
                }
            });
        }
        setDataTotal(arr);
    };

    useEffect(() => {
        allCommityTotal();
    }, []);

    const config = {
        appendPadding: 10,
        data: [...dataTotal,
        {
           type:'奶茶' ,
           value:300
        },
        {
            type:'可乐' ,
            value:600
         },
         {
            type:'雪碧' ,
            value:400
         },
         {
            type:'啤酒' ,
            value:600
         }
    ],
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        meta: {
            value: {
                formatter: (v) => `${v} 件`,
            },
        },
        label: {
            type: 'inner',
            offset: '-50%',
            style: {
                textAlign: 'center',
            },
            autoRotate: false,
            content: '{value}',
        },
        statistic: {
            title: {
                offsetY: -4,
                customHtml: (container, view, datum) => {
                    const { width, height } = container.getBoundingClientRect();
                    const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                    const text = datum ? datum.type : '总计';
                    return renderStatistic(d, text, {
                        fontSize: 28,
                    });
                },
            },
            content: {
                offsetY: 4,
                style: {
                    fontSize: '32px',
                },
                customHtml: (container, view, datum, data) => {
                    const { width } = container.getBoundingClientRect();
                    const text = datum ? ` ${datum.value}件` : ` ${data.reduce((r, d) => r + d.value, 0)}件`;
                    return renderStatistic(width, text, {
                        fontSize: 32,
                    });
                },
            },
        },
        // 添加 中心统计文本 交互
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
            {
                type: 'pie-statistic-active',
            },
        ],
    };
    return (
        <div style={{ backgroundColor: "white" }}>
            <h1 style={{ fontSize: '20px', margin: '10px 0 0 20px' }}>今日不同类型商品上线数量统计</h1>
            <Pie {...config} />
        </div>
    );
}